<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.common_btn_red{
				display: inline-block;
				border: 1px solid red;
				background-color: red;
				border-radius: 5px;
				color: whitesmoke;
				text-align: center;
				vertical-align: middle;
				width: 80px;
				height: 25px;
				line-height: 25px;
			}
			hr{
					border: 3px solid ghostwhite;
			}
		</style>
		<style>
			div{
				border: 0px solid red;
			}
			
			#con{
				width: 80%;
				margin: auto;
			}
			#con .header{
				position: relative;
			}
			#con .header .close{
				position: absolute;
				right: 20px;
				top:20px;
			}
			#con .content table{
				width: 100%;
			}
			#con .content table tr{
				background-color: #fafafa;
			}
			tr td input[type="checkbox"]{
				position: relative;
				top:-60px;
			}
			#con .content table tr:nth-child(1){
				background-color: white;
			}
			#con .content table tr td{
				border-bottom: 1px solid ghostwhite;
			}
			.footer_div{
				background-image: url(imgs/bg_footer.png);
				background-size: 100% 100%;
				height: 80px;
				margin-top: 20px;
				border: 0px solid red;
				vertical-align: middle;
				line-height: 80px;
			}
			.footer_div:after{
				content: "";
				display: block;
				clear: both;
			}
			.footer_div .common_btn_red{
				margin-top: 30px;
				margin-right: 30px;
				float: right;
			}
			.footer_div .zyf{
				margin-left: 300px;
			}
			
		</style>
		<link rel="stylesheet" type="text/css" href="css/goods_num.css" /> 
	</head>
	<body>
		
		<div id="con">
			<div class="header">
				<span class="logo">
					<img  src="imgs/dangdang_logo.png" />
				</span>
				<span class="close common_btn_red">关闭</span>
			</div>
			<hr/>
			<div class="content">
				<table cellspacing="0" cellpadding="0">
					<thead>
						<tr>
							<td>
								全选
							</td>
							<td>
								商品信息
							</td>
							<td>
								单价（元）
							</td>
							<td>
								数量
							</td>
							<td>
								金额（元）
							</td>
							<td>
								操作
							</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<input type="checkbox" value="" id="checkAll"/> <img src="imgs/dang_dang_font1.png"/
							</td>
							<td>
								&nbsp;
							</td>
							<td>
							&nbsp;
							</td>
							<td>
							&nbsp;
							</td>
							<td>
								&nbsp;
							</td>
							<td>
								&nbsp;
							</td>
						</tr>
						<tr>
							<td>
								<input type="checkbox" value="" name="good_name_ck" />
								<span class="goods_img">
									<img src="imgs/book1.png" style="width:100px;height: 150px;"/>
								</span>
							</td>
							<td>
								白岩松：自说
							</td>
							<td>
								￥12.3
							</td>
							<td>
								<span class="goods_num">
										<span class="btn" onmousedown="clickStyleDown(this)" onmouseup="clickStyleUp(this)" id="sub_btn" onclick="min()">-</span>
										<input type="text" id="num" value="0" onblur="chekNum()" class="good_text"/>
										<span class="btn" onmousedown="clickStyleDown(this)" onmouseup="clickStyleUp(this)" id="add_btn"  onclick="add()">+</span>
								</span>
							</td>
							<td>
								￥24.6
							</td>
							<td>
								<span>
									移入收藏
								</span>
								<br/>
								<span>
									删除
								</span>
							</td>
						</tr>
						
						<tr>
							<td>
								<input type="checkbox" value="" name="good_name_ck"/>
								<span class="goods_img">
									<img src="imgs/book1.png" style="width:100px;height: 150px;"/>
								</span>
							</td>
							<td>
								小麦田
							</td>
							<td>
								￥12.3
							</td>
							<td>
								<span class="goods_num">
										<span class="btn" onmousedown="clickStyleDown(this)" onmouseup="clickStyleUp(this)" id="sub_btn" onclick="min()">-</span>
										<input type="text" id="num" value="0" onblur="chekNum()" class="good_text"/>
										<span class="btn" onmousedown="clickStyleDown(this)" onmouseup="clickStyleUp(this)" id="add_btn"  onclick="add()">+</span>
								</span>
							</td>
							<td>
								￥24.6
							</td>
							<td>
								<span>
									移入收藏
								</span>
								<br/>
								<span>
									删除
								</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="footer_div">
				<input type="checkbox" value="" id="checkAll2"/>全选&nbsp;&nbsp;&nbsp;&nbsp;批量删除
				已选择<span id="checkGoodNum">0</span>件商品
				
				
				<span class="zyf">
					总计不含运费￥68.8 已节省：￥10
				</span>
				<span class="common_btn_red">结算</span>
			</div>
		</div>
		
		
		<script>
			
			
			var  checAay = document.getElementsByName("good_name_ck");
			for(var index in checAay){
				checAay[index].onclick = function(){
					countGoodsNum();
				}
			}
			
			var checkAll = document.getElementById("checkAll");
			var checkAll2 = document.getElementById("checkAll2");
			var checMethod = function(){
					var isCheck = this.checked;
					var checkOrNot = false;
					if(isCheck){
							checkOrNot = true;
					}else{
							 checkOrNot = false;
					}
					for(var index in checAay){
						checAay[index].checked = checkOrNot;
					}
					countGoodsNum();
				};
			if(checkAll || checkAll2){
				checkAll.onclick = checMethod;
				checkAll2.onclick = checMethod;
			}
			/**
			 * 计算并设置商品选中的数量
			 */
			function countGoodsNum(){
				var checkGoodNum = 0;
				var  checAayTemp = document.getElementsByName("good_name_ck");
				for(var i = 0,len = checAayTemp.length;i<len;i++){
					var isCheck = checAayTemp[i].checked;
					if(isCheck){
							checkGoodNum ++;
					}
				}
				document.getElementById("checkGoodNum").innerHTML = checkGoodNum;
			}
		</script>
		
		<script src="js/goods_num.js"></script>
	</body>
</html>
